<template>
    <el-card shadow="never">
        咨询用户列表
    </el-card>
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                prop="nickName"
                label="名字"
                width="220">
        </el-table-column>
        <el-table-column
                prop="userPhone"
                label="手机号"
                width="250">
        </el-table-column>
        <el-table-column
                prop="status"
                label="状态">
            <template #default="scope">
                <el-tag type="success" v-show="scope.row.status == 0">
                    ✔ 已咨询
                </el-tag>
              <el-tag type="danger" v-show="scope.row.status == 1">
                ✖ 待咨询
              </el-tag>
            </template>
        </el-table-column>
        <el-table-column
                prop="oper"
                label="操作"
                width="150"
                fixed="right">
            <template #default="scope">
                <el-button
                        @click="updateStatusHandler(scope.row.id)"
                        :disabled="scope.row.status == 0"
                        type="text"
                        size="small">
                    标记
                </el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
    import {onBeforeMount, reactive, toRefs} from "vue";
    import {taskList, updateStatus} from "@/api/ConTask";
    import {getUser} from "@/utils/cookies";

    export default {
        name: "index",
        setup() {
            const data = reactive({
                tableData: [],
            })

            onBeforeMount(() => {
                refreshData()
            })

            let updateStatusHandler = (id) => {
                updateStatus(id).then(res => {
                    refreshData()
                })
            }

            let refreshData = () => {
                taskList(getUser().id).then(res => {
                    data.tableData = res.data
                })
            }

            return {
                ...toRefs(data),
                updateStatusHandler
            }
        }
    }
</script>

<style scoped>

</style>
